<template>
  <view class="card-wrapper">
    <view class="card-top">
      <view class="card-title">{{ title }}</view>
      <view v-if="hasMore" @tap="$emit('onMoreClick')" class="card-more">{{ moreTxt }}</view>
    </view>
    <view class="card-main">
      <slot></slot>
    </view>
  </view>
</template>
<script setup>
  defineProps({
    title: {
      type: String,
      default: ""
    },
    moreTxt: {
      type: String,
      default: "更多"
    },
    hasMore: {
      type: Boolean,
      default: false
    }
  });
  defineEmits(["onMoreClick"]);
</script>
<style lang="scss" scoped>
.card-wrapper {
  padding: 40upx 20upx;
  box-sizing: border-box;
  border-radius: 23upx;
  background: #FFF;
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .card-title {
      color: #1F1F1F;
      font-size: 36upx;
      font-style: normal;
      font-weight: 600;
      line-height: 50upx;
    }
    .card-more {
      color: #A9A9A9;
      text-align: right;
      font-size: 20upx;
      font-style: normal;
      font-weight: 400;
      line-height: 50upx;
      width: 100upx;
    }
  }
  .card-main {
    padding-top: 20upx;
  }
}
</style>